<script setup>
import FanPopup from '..'
import FanButton from '../../button'
import { ref } from 'vue'

const show = ref(false)
const position = ref('center')

const showPop = (p = 'center') => {
	position.value = p
	show.value = true
}

const onClosed = () => { }
</script>

<template>
	<demo-block title="基础用法">
		<FanPopup v-model:show="show" :lock-scroll="true" :position="position" :title="position === 'bottom' ? '提示' : ''"
			:closeable="position === 'bottom' ? true : false" overlay-style="background: red" @closed="onClosed">
			<div style="padding: 30px" class="fan-flex-col fan-align-center fan-justify-center">
				<div>内容</div>
				<FanButton @click="show = false">关闭</FanButton>
			</div>
		</FanPopup>
		<FanButton @click="showPop()">弹出</FanButton>
	</demo-block>

	<demo-block title="弹出位置">
		<div style="height: 200vh;">
			<FanButton @click="showPop('bottom')">底部弹出</FanButton>
			<FanButton @click="showPop('left')">左侧弹出</FanButton>
		</div>
	</demo-block>
</template>
